<template>
  <view>
    <view v-if="userInfo" class="content">
      <u-button
        v-if="Read_news.length > 0"
        type="primary"
        size="mini"
        @click="readAllFn"
        >全部已读</u-button
      >
      <CollapseItem
        :title="`未读消息（${Read_news.length}）`"
        :list="Read_news"
      />
      <CollapseItem
        :title="`已读消息（${Unread_news.length}）`"
        :list="Unread_news"
      />
    </view>
    <NoLogin v-else />
    <TabBar />
  </view>
</template>

<script>
import { mapState } from "vuex";
import { messages } from "@/api/news.js";
import TabBar from "@/components/TabBar";
import NoLogin from "@/components/noLogin";
import { readAll } from "@/api/news.js";
import CollapseItem from "./components/collapse-item.vue";
export default {
  components: {
    TabBar,
    CollapseItem,
    NoLogin,
  },
  data() {
    return {
      Read_news: [], //已读
      Unread_news: [], //未读
    };
  },
  computed: {
    ...mapState("user", ["userInfo"]),
  },
  onShow() {
    if (this.userInfo) {
      this.getData();
    }
  },
  methods: {
    getData() {
      messages({ accesstoken: this.userInfo.token }).then((res) => {
        this.Read_news = res.data.hasnot_read_messages;
        this.Unread_news = res.data.has_read_messages;
      });
    },
    readAllFn() {
      readAll().then((res) => {
        this.getData();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  padding: 20rpx;
}
</style>
